<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
    
      <ul>
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名..." v-model="keyword"> <br> <br>
        <li v-for="p in filPersons" :key="p.id">
          {{p.name}} ---- {{p.age}} ---- {{p.sex}}
        </li>
      </ul>

   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              keyword:'',
              persons:[
                {id:1, name:'马冬梅', age:18, sex:"女"},
                {id:2, name:'周冬雨', age:19, sex:"女"},
                {id:3, name:'周杰伦', age:20, sex:"男"},
                {id:4, name:'温兆伦', age:21, sex:"男"}
              ],
              // (1) 使用新数组是因为每一次请求都需要从原数组进行过滤，因此原数组不能被破坏
              // filPersons:[]
            },
            computed:{
              filPersons(){

                /**
                 * (6) 计算属性和监视属性相比 为什么代码真么少？ 
                 *     1.计算属性里面保留的是监视属性的核心代码
                 *     2.由于监视属性需要额外的变量，因此存在初始值的问题
                 *       但计算属性它是等计算好了再作为vm的属性的，处理得比监视属性要快
                 * (7) 以后优先使用computed
                 * */ 
                return      this.persons.filter((p)=>{
                             
                            return p.name.indexOf(this.keyword) !== -1
                 
                
                           })
                  }
                },
            // watch:{
            //   // (2) 监视的是用户输入的值，而不是filPersons，注意区分
            //   keyword:{
            //       /**
            //        * (3) 由于当用户什么也没输入的时候，此时为空字符串，而空字符串在任何字符串中都能被找到
            //        *     返回index为0，刚好满足了用户在不输入的情况下获得所有数据的需求
            //        *     而刚开始不输入的时候也需要展示所有人，因此需要立刻执行一次
            //        * */ 
            //        immediate:true,
            //        handler(val){
            //           // (4) filter从原数组进行过滤返回一个新的数组，是不会破坏原数组的
            //           this.filPersons = this.persons.filter((p)=>{
            //               // (5) 字符串查找的方法indexOf很实用记住
            //               return p.name.indexOf(val) !== -1
            //           })
            //        }
            //    }
            // }
        })
    </script>
</body>
</html>